<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    font-size: 100%;
    padding: 3em;
  }

  .mainNav {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
    margin-left: 300px;
  }

  .mainNav ul {
    list-style: none;
    padding: 0;
    position: relative;
  }

  .mainNav ul:after {
    background-color: hsla(0, 0%, 0%, 0.1);
    box-shadow: 0 0.09375em 0.1875em 0.1875em hsla(0, 0%, 0%, 0.1);
    content: '';
    height: 0.375em;
    left: 0.75em;
    position: absolute;
    right: 0.75em;
    top: 100%;
    z-index: -1;
  }

  .mainNav a {
    background-color: #f79533;
    background-image: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 0%, .05)), linear-gradient(-197.5deg, hsla(0, 0%, 100%, .025) 50%, transparent 50%);
    backface-visibility: hidden;
    box-shadow: inset 0 0 .125em hsla(0, 0%, 0%, .25), inset 0 0 1.5em hsla(0, 0%, 0%, .25);
    color: #333;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .25);
    transition: .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 6em;
  }

  .mainNav a:after {
    background-color: inherit;
    background-image: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 0%, .05)), linear-gradient(-197.5deg, hsla(0, 0%, 100%, .025) 50%, transparent 50%), linear-gradient(hsla(0, 0%, 0%, .25), hsla(0, 0%, 0%, .25));
    box-shadow: inset 0 0 .25em hsla(0, 0%, 0%, .2), inset 0 0 1.5em hsla(0, 0%, 0%, .3);
    bottom: 0;
    color: #fff;
    content: attr(data-title);
    left: 100%;
    line-height: 3;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    width: 100%;
  }

  .mainNav a:before {
    background-color: inherit;
    background-image: linear-gradient(hsla(0, 0%, 100%, .07), hsla(0, 0%, 0%, .07)), linear-gradient(hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .5));
    bottom: 0;
    content: '';
    height: 9em;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
  }

  .mainNav li:nth-child(-n+2) a:before {
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
  }

  .mainNav li:nth-child(n+3) a:before {
    transform: rotateX(-90deg) translateX(-9em);
  }

  .mainNav li:hover a {
    transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
    z-index: 100;
  }
</style>

<body>
  <nav class="mainNav">
    <ul>
      <li><a href="#" data-title="Home">Home</a></li>
      <li><a href="#" data-title="About">About</a></li>
      <li><a href="#" data-title="Clients">Clients</a></li>
      <li><a href="#" data-title="Work">Work</a></li>
      <li><a href="#" data-title="Contact Us">Contact Us</a></li>
    </ul>
  </nav>
</body>

</html>